<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
window.onload=function(){
	var canvas=document.getElementById('canvas');
	canvas.width=800;
	canvas.height=800;
	var context=canvas.getContext('2d');
	// context.arc(200,200,100,0.5*Math.PI,1.5*Math.PI,true);
	// context.moveTo(200,100)
	// context.arcTo(300,200,200,300,(200-100)*dis(200,100,300,200)/(300-200));
	// context.stroke();
	//画星空
	var skyStyle=context.createLinearGradient(0,0,0,canvas.height);
	skyStyle.addColorStop(0.0,'black');
	skyStyle.addColorStop(1.0,'#035');
	context.fillStyle=skyStyle;

	context.fillRect(0,0,canvas.width,canvas.height);
	for(var i=0;i<200;i++){
		var r=Math.random()*5+5;
		var x=Math.random()*canvas.width;
		var y=Math.random()*canvas.height*0.65;
		var a=Math.random()*360;
		drawStar(context,x,y,r,a);
	}
	 function drawStar(cxt,x,y,r,rot,fillColor){
 	
 	cxt.beginPath()
 	for(var i=0;i<5;i++){
 		cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*r+x,-Math.sin((18+i*72-rot)/180*Math.PI)*r+y);
 		cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r/2+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r/2+y);
 	}
 	cxt.closePath();
 	cxt.fillStyle=fillColor||"#fb5";
 	cxt.fill();
 	cxt.lineWidth=1;
 	cxt.lineCap='round';
 	cxt.strokeStyle="yellow";
 	cxt.stroke();
 }
	fillMoon(context,2,600,200,100,30);
	drawLand(context);
 }
 function drawLand(cxt){
 	cxt.save();
 	cxt.beginPath();
 	cxt.moveTo(0,600);
 	cxt.bezierCurveTo(540,400,660,800,1200,600)
 	cxt.lineTo(1200,800);
 	cxt.lineTo(0,800);
 	cxt.closePath();
 	var landStyle=cxt.createLinearGradient(0,800,0,0);
 	landStyle.addColorStop(0.0,"#030");
 	landStyle.addColorStop(1.0,"#580");
 	cxt.fillStyle=landStyle;
 	cxt.fill();
 	cxt.restore();
 }
 function dis(x1,y1,x2,y2){
 	return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
 }
 function fillMoon(cxt,d,x,y,R,rot,fillColor){
 	cxt.save();
 	cxt.translate(x,y);
 	cxt.rotate(rot*Math.PI/180);
 	cxt.scale(R,R);
 	pathMoon(cxt,d);
 	cxt.fillStyle=fillColor||"#fb5";
 	cxt.fill();
 	cxt.restore();
 }
 function pathMoon(cxt,d){
 	cxt.beginPath();
 	cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
 	cxt.moveTo(0,-1);
 	cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
 	cxt.closePath();
 }
</script>
</html>